<div class="account-main-section main-height ">
    <div class="channel-content">
        <h3 class="channel-content-header text-uppercase" i18n>My Exchange Vouchers</h3>
        <div class="text-center">
            <div class="row">
                <div class="col-md-2 col-xs-12"></div>
                <div class="col-md-7 col-xs-12">
                    <div class="row mt-50">
                        <div class="col-md-4 col-xs-12  text-right" style="margin-top: 8px;">
                            <label class="control-label text-capitalize" i18n>voucher number:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="voucher.number" #realname="ngModel" placeholder="Please enter your voucher number" i18n-placeholder required="required" />
                            <div class="alert alert-danger" *ngIf="realname.invalid && (realname.touched || realname.dirty)">
                                <div *ngIf="realname.errors.required" i18n>
                                    Number is required!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-50">
                        <div class="col-md-4 col-xs-12 text-right" style="margin-top: 8px;">
                            <label class="text-capitalize" i18n>voucher cipher:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="password" [(ngModel)]="voucher.pass" #password="ngModel" minlength="8" placeholder="Please enter your voucher password" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="password.invalid && (password.dirty || password.touched)">
                                <div *ngIf="password.errors.required" i18n>
                                    Password is required!
                                </div>
                                <div *ngIf="password.errors.minlength" i18n>
                                    Password must be at least 8 characters long!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-50">
                        <div class="col-md-4 col-xs-12 text-right" style="margin-top: 8px;">
                            <label class="text-capitalize" i18n>name:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="voucher.name" #contactName="ngModel" placeholder="Please enter your name" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="contactName.invalid && (contactName.dirty || contactName.touched)">
                                <div *ngIf="contactName.errors.required" i18n>
                                    Name is required!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-50">
                        <div class="col-md-4 col-xs-12 text-right" style="margin-top: 8px;">
                            <label class="text-capitalize" i18n>phone:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="voucher.phone" #contactPhone="ngModel" minlength="11" maxlength="11" pattern="/^1\d{10}$/ || /^0\d{2,3}-?\d{7,8}$/ " placeholder="Please enter your phone number" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="contactPhone.invalid && (contactPhone.dirty || contactPhone.touched)">
                                <div *ngIf="contactPhone.errors.required" i18n>
                                    Phone is required!
                                </div>
                                <div *ngIf="contactPhone.errors.minlength" i18n>
                                    The format of the phone number is not correct
                                </div>
                                <div *ngIf="contactPhone.errors.maxlength" i18n>
                                    Phone no more than 11 characters long!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-50">
                        <div class="col-md-4 col-xs-12 text-right" style="margin-top: 8px;">
                            <label class="text-capitalize" i18n>email:</label>
                        </div>
                        <div class="col-md-8 col-xs-12">
                            <input class="my_input form-control" type="text" [(ngModel)]="voucher.email" #contactEmail="ngModel" email="" name="email" placeholder="Please enter your email" i18n-placeholder required="required"/>
                            <div class="alert alert-danger" *ngIf="contactEmail.invalid && (contactEmail.dirty || contactEmail.touched)">
                                <div *ngIf="contactEmail.errors.required" i18n>
                                    Email is required!
                                </div>
                                <div *ngIf="!contactEmail.errors.required && contactEmail.errors.email" i18n>
                                    Invalid email!
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-50">
                        <div class="col-md-12 col-xs-12" >
                            <button class="btn btn-block btn-primary" disabled="{{(voucher.email=='' || voucher.phone=='' || voucher.number=='')}}" (click)="submitVoucher()" i18n>Submit</button>
                        </div>
                    </div>
                    <div class="row mt-50 text-center" i18n>
                        After the application, there will be 1~3 working days for the audit time. Please keep the contact information open
                    </div>
                </div>
                <div class="col-md-3 col-xs-12"></div>
            </div>
        </div>
    </div>

</div>